<template>
  <div class="index-container">
    <div class="index-title">
      <img src="@/assets/img/title.png" />
      <div class="diy-divider"></div>
      <img src="@/assets/img/des.png" />
    </div>

    <div class="index-cate">
      <img src="@/assets/img/div.png" alt="divider" />
      <span>商品分类</span>
      <Category/>
      <div class="carousel-box">
        <Carousel autoplay :autoplay-speed="speed1" loop dots="none">
          <CarouselItem>
            <div class="carousel-items wow fadeInUp" data-wow-delay=".3s">
              <div v-for="good in goods1" :key="good.img" class="carousel-item">
                <img :src="good.img" />
                <span>{{good.des}}</span>
              </div>
            </div>
          </CarouselItem>

          <CarouselItem>
            <div class="carousel-items">
              <div v-for="good in goods2" :key="good.img" class="carousel-item">
                <img :src="good.img" />
                <span>{{good.des}}</span>
              </div>
            </div>
          </CarouselItem>

          <CarouselItem>
            <div class="carousel-items">
              <div v-for="good in goods3" :key="good.img" class="carousel-item">
                <img :src="good.img" />
                <span>{{good.des}}</span>
              </div>
            </div>
          </CarouselItem>
        </Carousel>
      </div>

      <img src="@/assets/img/div.png" alt="divider" />
      <span>新品上市</span>
    </div>

    <div class="index-content">
      <div class="index-part1 wow fadeInLeft" data-wow-duration="2s" data-wow-offset="200">
        <img src="@/assets/img/goods/1-1.png" />
        <span>&nbsp;—&nbsp;寓义新款新轻奢主义静音艺术挂钟铜色系列&nbsp;—&nbsp;</span>
        <div class="index-des">
          <p>
            时间是一个抽象的概念
            <br />表达事物的生灭排列
            <br />用文字和几何来主管呈现
            <br />时间里有空间
            <br />时间里有方位
            <br />时间里有时间
          </p>

          <router-link to="/goods/1/">了解详情→</router-link>
        </div>
      </div>
      <div class="index-part2 wow fadeInRight" data-wow-duration="2s" data-wow-offset="200">
        <img src="@/assets/img/goods/1-2.png" />
        <span>&nbsp;—&nbsp;紫光檀纯手工打磨博古架&nbsp;—&nbsp;</span>

        <div class="index-des">
          <p>
            陈列古玩珍宝
            <br />彰显非凡品味
            <br />无论摆放在客厅还是书房
            <br />或是办公室，亦或是茶馆
            <br />都能彰显不一样的品味
          </p>
          <router-link to="/goods/4/">←了解详情</router-link>
        </div>
      </div>
      <div class="index-part3 wow fadeInLeft" data-wow-duration="2s" data-wow-offset="200">
        <div class="index-p3-plus">
          <span>&nbsp;—&nbsp;</span>
          <div class="p3-inner">
            <span>存在HOME元系列</span>
            <span>×</span>
            <span>黑胡桃白橡木门厅玄关柜</span>
          </div>
          <span>&nbsp;—&nbsp;</span>
        </div>
        <img src="@/assets/img/goods/1-3.png" />
        <div class="index-des">
          <p>
            <br />柜门采用隐形暗拉手
            <br />更贴心的无外凸设计理念
            <br />圆环造型，以元寓圆
            <br />将中式元素符号融入现代生活
          </p>
          <router-link to="/goods/2/">了解详情→</router-link>
        </div>
      </div>
      <div class="index-part4 wow fadeInRight" data-wow-duration="2s" data-wow-offset="200">
        <span>&nbsp;—&nbsp;林荫系列·实木五斗柜&nbsp;—&nbsp;</span>
        <img src="@/assets/img/goods/1-4.png" />
        <div class="index-des">
          <p>
            秉承“简约而不简单”的设计理念
            <br />轻松自然，简洁明快的设计风格
            <br />使意式的现代设计艺术与国内的现代生活潮流
            <br />完美的结合起来从而营造出了新生活、新色彩、新享受
            <br />的新一代高品味生活得美好形象
          </p>
          <router-link to="/goods/6">←了解详情</router-link>
        </div>
      </div>

      <div class="index-part5">
        <img src="@/assets/img/div.png" alt="divider" />
        <span>匠人云集</span>
      </div>

      <div class="carousel-box">
        <Carousel autoplay :autoplay-speed="speed2" loop dots="none">
          <CarouselItem >
            <div class="carousel-items person wow fadeInUp" data-wow-delay=".3s">
              <div v-for="craftsman in craftsman1" :key="craftsman.des" class="carousel-item">
                <img :src="craftsman.src" />
                <div class="craftsman-mark">
                  <h3>{{craftsman.name}}</h3>
                  <span>{{craftsman.des}}</span>
                </div>
              </div>
            </div>
          </CarouselItem>

          <CarouselItem>
            <div class="carousel-items person wow fadeInUp" data-wow-delay=".3s">
              <div v-for="craftsman in craftsman2" :key="craftsman.des" class="carousel-item">
                <img :src="craftsman.src" />
                <div class="craftsman-mark">
                  <h3>{{craftsman.name}}</h3>
                  <span>{{craftsman.des}}</span>
                </div>
              </div>
            </div>
          </CarouselItem>
        </Carousel>
      </div>

      <div class="index-part6">
        <img src="@/assets/img/index_footer_text.png">
      </div>
    </div>

    <div class="bg">
      <video
        id="videoBG"
        poster="../assets/img/index.png"
        autoplay="autoplay"
        preload
        muted
        loop="loop"
      >
        <source src="@/assets/video/index.mp4" type="video/mp4" />
      </video>
    </div>
  </div>
</template>

<script>
// @ is an alias to /src
import Category from "@/components/Category.vue";

export default {
  name: "home",
  components: {
    Category
  },
  data() {
    return {
      goods1: [
        { img: "img/goods/1.jpg", des: "景德镇陶瓷手工马克杯" },
        { img: "img/goods/2.jpg", des: "手工绘制水墨亚光白柚品茗杯" },
        { img: "img/goods/3.jpg", des: "手绘鱼茶具套装" },
        { img: "img/goods/4.jpg", des: "一粒砂紫砂壶" }
      ],
      goods2: [
        { img: "img/goods/5.png", des: "手工古风镶花时钟" },
        { img: "img/goods/6.jpg", des: "紫光檀博古架" },
        { img: "img/goods/7.jpg", des: "竹居·榻榻米茶几凳" },
        { img: "img/goods/8.jpg", des: "黑胡桃纯实木环保圆几" }
      ],
      goods3: [
        { img: "img/goods/9.jpg", des: "茉莉花茶" },
        { img: "img/goods/10.jpg", des: "大红袍" },
        { img: "img/goods/11.jpg", des: "白牡丹" },
        { img: "img/goods/12.jpg", des: "霍山黄芽蒙洱银针" }
      ],
      craftsman1: [
        {
          src: "img/craftsman/1.png",
          name: "宋世义",
          des: "中国工艺美术大师 中国玉雕大师"
        },
        {
          src: "img/craftsman/2.png",
          name: "徐维明",
          des: "宜兴徐门紫砂第四代传人"
        },
        {
          src: "img/craftsman/3.png",
          name: "徐朝兴",
          des: "国家级\"非遗\"龙泉青瓷传承人"
        },
        {
          src: "img/craftsman/4.png",
          name: "谢华",
          des: "中国工艺美术大师 手拉壶第五代传人"
        }
      ],
      craftsman2: [
        {
          src: "img/craftsman/5.png",
          name: "龙梓嘉",
          des: "95后珠宝设计师"
        },
        {
          src: "img/craftsman/6.png",
          name: "陈卫武",
          des: "龙泉三杰之一 宋韵工作室创始人"
        },
        {
          src: "img/craftsman/7.png",
          name: "思旻",
          des: "上九工作室创始人 代表作为孔雀釉"
        },
        {
          src: "img/craftsman/8.png",
          name: "向元华",
          des: "中国御窑工艺传承人 御窑元华堂创始人"
        }
      ],
      speed1: 4000,
      speed2: 8000
    };
  }
};
</script>
